<template>
  <el-col class="datetime">
    <van-cell
      :title="node.answer ? answer : '请选择'"
      value=""
      is-link
      @click="show = true"
    >
    </van-cell>
    <van-popup
      v-model="show"
      :closeable="false"
      @close="close"
      position="bottom"
    >
      <van-datetime-picker
        @confirm="confirm"
        @cancel="close"
        v-model="node.answer"
        type="date"
        title="请选择"
      />
    </van-popup>
  </el-col>
</template>

<script>
export default {
  props: ["node"],
  data() {
    return {
      show: false,
      answer: "",
    };
  },

  mounted() {
    this.node.answer
      ? (this.answer = new Date(this.node.answer).toLocaleDateString())
      : null;
  },

  methods: {
    close(e) {
      this.show = false;
    },
    confirm(e) {
      this.close();
      this.answer = e.toLocaleDateString();
    },
  },
};
</script>

<style scoped>
.van-cell {
  padding: 10px;
  padding-left: 0;
  padding-right: 0;
}
.van-cell::after {
  border: none;
}
.datetime >>> .van-cell__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>